<template>
  <div class="session-manager">
    <div class="session-header">
      <h2>会话列表</h2>
      <button class="clear-btn" @click="handleClearAll">
        <Icon icon="mdi:delete-sweep" />
        清空会话
      </button>
    </div>
    
    <div class="session-list">
      <div 
        v-for="session in chatStore.sessions" 
        :key="session.id"
        class="session-item"
        :class="{ active: session.id === chatStore.currentSessionId }"
        @click="handleSelectSession(session.id)"
      >
        <div class="session-info">
          <Icon icon="mdi:message-text" />
          <span class="title">{{ session.title }}</span>
          <span class="time">{{ formatTime(session.updatedAt) }}</span>
        </div>
        <div class="session-actions">
          <button 
            class="action-btn rename"
            @click.stop="handleRename(session)"
          >
            <Icon icon="mdi:pencil" />
          </button>
          <button 
            class="action-btn delete"
            @click.stop="handleDelete(session.id)"
          >
            <Icon icon="mdi:delete" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { useChatStore } from '@/stores/chat'
import { message } from '@/services/message'
import { ref } from 'vue'
import type { ChatSession } from '@/stores/chat'

const chatStore = useChatStore()

const formatTime = (timestamp: number) => {
  const date = new Date(timestamp)
  const now = new Date()
  
  if (date.toDateString() === now.toDateString()) {
    return date.toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit' 
    })
  }
  
  return date.toLocaleDateString('zh-CN', { 
    month: 'numeric', 
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const handleSelectSession = (sessionId: string) => {
  chatStore.currentSessionId = sessionId
}

const handleDelete = async (sessionId: string) => {
  try {
    await chatStore.deleteSession(sessionId)
    message.success('删除成功')
  } catch (error) {
    message.error('删除失败')
  }
}

const handleClearAll = async () => {
  if (confirm('确定要清空所有会话吗？')) {
    try {
      await chatStore.clearSessions()
      message.success('清空成功')
    } catch (error) {
      message.error('清空失败')
    }
  }
}

const handleRename = (session: ChatSession) => {
  const newTitle = prompt('请输入新的标题', session.title)
  if (newTitle && newTitle !== session.title) {
    chatStore.renameSession(session.id, newTitle)
  }
}
</script>

<style lang="scss" scoped>
.session-manager {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
}

.session-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);

  h2 {
    font-size: 16px;
    font-weight: 600;
  }

  .clear-btn {
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--text-secondary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: var(--hover-bg);
    }
  }
}

.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.session-item {
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 4px;

  &:hover {
    background: var(--hover-bg);
    
    .session-actions {
      opacity: 1;
    }
  }

  &.active {
    background: var(--primary-light);
  }

  .session-info {
    display: flex;
    align-items: center;
    gap: 8px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .time {
      font-size: 12px;
      color: var(--text-secondary);
    }
  }

  .session-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s;

    .action-btn {
      padding: 4px;
      border: none;
      background: none;
      color: var(--text-secondary);
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: var(--hover-bg);
        
        &.delete {
          color: #ff4d4f;
        }
      }
    }
  }
}
</style> 